import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { colors, spacing, typography } from '../styles/variables';
import { Card, Button, Title, Paragraph, Container, Grid } from '../styles/components';
import { Link } from 'react-router-dom';

const HeroSection = styled.section`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  text-align: center;
  padding: 2rem;
  background: ${colors.background};
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
  }

  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
`;

const CenteredLogo = styled.h1`
  font-size: 3.5rem;
  font-weight: 700;
  background: ${colors.gradientGold};
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
  text-align: center;
  padding: 0 15px; /* 添加左右内边距，使文字不紧贴边界 */
  position: relative;
  z-index: 2;
`;

const Tagline = styled.p`
  font-size: 1.5rem;
  color: ${colors.textSecondary};
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  z-index: 2;
`;

const FeatureCard = styled(Card)`
  text-align: center;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
`;

const FeatureIcon = styled.div`
  font-size: 3rem;
  margin-bottom: ${spacing.md};
  background: ${colors.gradientGold};
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
`;

const FeatureTitle = styled.h3`
  color: ${colors.textPrimary};
  font-size: ${typography.fontSize.xl};
  margin-bottom: ${spacing.sm};
`;

const FeatureDescription = styled.p`
  color: ${colors.textSecondary};
  font-size: ${typography.fontSize.base};
  line-height: 1.6;
`;

const Section = styled.section`
  padding: ${spacing.xxl} 0;
  background: ${props => props.$secondary ? colors.backgroundSecondary : colors.background};
`;

const SectionTitle = styled(Title)`
  text-align: center;
  margin-bottom: ${spacing.xl};
`;

const CTASection = styled.div`
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
`;

const CTATitle = styled.h2`
  font-size: ${typography.fontSize['3xl']};
  color: ${colors.textPrimary};
  margin-bottom: ${spacing.md};
`;

const CTADescription = styled.p`
  font-size: ${typography.fontSize.lg};
  color: ${colors.textSecondary};
  margin-bottom: ${spacing.xl};
  line-height: 1.6;
`;

const Home = () => {
  const features = [
    {
      icon: '🔮',
      title: '每日运势',
      description: '获取每日个性化运势指导'
    },
    {
      icon: '🃏',
      title: '占卜工具',
      description: '多种占卜工具任你选择'
    },
    {
      icon: '🌙',
      title: '解梦释疑',
      description: '专业解梦师为你答疑解惑'
    },
    {
      icon: '🧘',
      title: '心灵驿站',
      description: '放松心情，舒缓压力'
    }
  ];

  return (
    <>
      <HeroSection>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <CenteredLogo>灵犀指引</CenteredLogo>
          <Tagline>探索未知，指引未来</Tagline>
          <motion.div
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <Button as={Link} to="/reading" size="large">
              开始体验
            </Button>
          </motion.div>
        </motion.div>
      </HeroSection>

      {/* Features Section */}
      <Section>
        <Container>
          <SectionTitle>核心功能</SectionTitle>
          <Grid columns={2} gap={spacing.lg}>
            {features.map((feature, index) => (
              <FeatureCard key={index}>
                <FeatureIcon>{feature.icon}</FeatureIcon>
                <FeatureTitle>{feature.title}</FeatureTitle>
                <FeatureDescription>{feature.description}</FeatureDescription>
              </FeatureCard>
            ))}
          </Grid>
        </Container>
      </Section>

      {/* CTA Section */}
      <Section $secondary>
        <Container>
          <CTASection>
            <CTATitle>开启您的灵犀之旅</CTATitle>
            <CTADescription>
              立即体验灵犀指引，探索内心深处的智慧与洞察
            </CTADescription>
            <Button as={Link} to="/reading" size="large">
              立即开始
            </Button>
          </CTASection>
        </Container>
      </Section>
    </>
  );
};

export default Home;